<template>
    <div id="app">
        <div>
            <el-container>
                <el-header class="top">
                    <el-menu
                        :default-active="activeIndex2"
                        class="el-menu-demo"
                        mode="horizontal"
                        background-color="#545c64"
                        text-color="#fff"
                        active-text-color="#ffd04b"
                        router
                    >
                        <el-menu-item @click="login"
                            >欢迎登录
                            {{ $store.state.user.username }}</el-menu-item
                        >
                        <el-menu-item @click="logout">退出</el-menu-item>
                        <el-menu-item index="/order" @click="dig"
                            >我的订单</el-menu-item
                        >
                        <el-menu-item index="/collect" @click="dig"
                            >我的收藏</el-menu-item
                        >
                        <el-menu-item index="/shopcar" @click="dig">
                            <i class="el-icon-shopping-cart-2"></i>
                            <span>购物车</span>
                        </el-menu-item>
                    </el-menu>
                </el-header>
                <el-main>
                    <el-dialog
                        title="登录"
                        :visible.sync="dialogVisible"
                        width="30%"
                        :before-close="handleClose"
                    >
                        <el-form
                            :inline="true"
                            :model="form"
                            class="demo-form-inline"
                        >
                            <el-form-item label="账号">
                                <el-input
                                    v-model="form.username"
                                    placeholder="请输入用户名"
                                ></el-input>
                            </el-form-item>
                            <el-form-item label="密码">
                                <el-input
                                    type="password"
                                    v-model="form.password"
                                    placeholder="请输入密码"
                                ></el-input>
                            </el-form-item>
                        </el-form>
                        <span slot="footer" class="dialog-footer">
                            <el-button @click="dialogVisible = false"
                                >取 消</el-button
                            >
                            <el-button type="primary" @click="onSubmit"
                                >登 录</el-button
                            >
                        </span>
                    </el-dialog>
                    <router-view></router-view>
                </el-main>
            </el-container>
        </div>
    </div>
</template>
<script>
import { getLogin } from "./untils/api/index";
import { Toast } from "vant";
export default {
    data() {
        return {
            activeIndex: "2",
            activeIndex2: "2",
            dialogVisible: false,
            form: {
                username: "jiyun",
                password: "password",
            },
        };
    },
    created() {
        this.onSubmit();
    },
    methods: {
        // dig 和 login 都是让登录弹窗出现
        dig() {
            if (!localStorage.getItem("token")) {
                this.dialogVisible = true;
            }
        },
        login() {
            if (localStorage.getItem("token")) {
                this.$router.push({
                    path: "/order",
                });
            } else {
                this.dialogVisible = true;
            }
        },
        // 点击关闭弹窗
        handleClose(done) {
            done();
        },
        //登录事件
        onSubmit() {
            const obj = {
                userName:this.form.username,
                password:this.form.password,
            };
            getLogin(obj).then((res) => {
                this.$store.commit("onSubmit", this.form);
                localStorage.setItem("token", JSON.stringify(this.form));
                this.$router.push({ path: "/home" });
                this.dialogVisible = false;
                Toast("登录成功！");
            });
            if(this.username==''){
                Toast("未输入用户名！");
            }else if(this.password==''){
                Toast("密码错误！");
            }
        },
        // 退出登录
        logout() {
            if (localStorage.getItem("token")) {
                localStorage.removeItem("token");
                Toast("成功退出！");
            } else {
                Toast("您还未登录！");
            }
        },
    },
};
</script>
<style lang="scss" scoped>
#app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
/deep/.el-menu-item.is-disabled {
    color: black;
}
.top {
    background-color: #545c64;
}
.el-menu-demo {
    margin-left: 900px;
}
</style>
